<template>
  <div>
    <!-- 新增按钮 -->
    <a-row>
      <a-col :span="4" style="margin-bottom: 10px;">
        <a-button type="dashed" style="width: 100%" @click="addFile('工具技术规范')">添加工具技术规范</a-button>
      </a-col>
      <a-col :span="3" style="margin-left: 10px">
        <a-button type="dashed" style="width: 100%" @click="addFile('动画')">添加动画</a-button>
      </a-col>
      <a-col :span="3" style="margin-left: 10px">
        <a-button type="dashed" style="width: 100%" @click="addFile('视频')">添加视频</a-button>
      </a-col>
      <a-col :span="4" style="margin-left: 10px">
        <a-button type="dashed" style="width: 100%" @click="addFile('爆破图')">添加爆破图</a-button>
      </a-col>
      <a-col :span="4" style="margin-left: 10px">
        <a-button type="dashed" style="width: 100%" @click="addFile('工具说明')">添加工具说明</a-button>
      </a-col>
      <a-col :span="4" style="margin-left: 10px">
        <a-button type="dashed" style="width: 100%" @click="addFile('装配图')">添加装配图</a-button>
      </a-col>
    </a-row>
    <!-- 内容折叠 -->
    <a-collapse v-model:activeKey="activeKey">
      <a-collapse-panel key="1" header="总表">
        <GroundTool v-if="ToolSwitch" :columns="groundColumns" :toolType="props.toolType"></GroundTool>
        <SalvageTube v-if="!ToolSwitch" :columns="salvageColumns" :toolType="props.toolType"></SalvageTube>
      </a-collapse-panel>
      <a-collapse-panel key="2" header="工具技术规范">
        <TechRules :toolType="props.toolType" :fileType="'工具技术规范'" :listData="listData.techRule"
          @getFileList="getFileList">
        </TechRules>
      </a-collapse-panel>
      <a-collapse-panel key="3" header="动画">
        <ToolVideo :toolType="props.toolType" :fileType="'动画'" :listData="listData.cartoon" @getVideoList="getVideoList">
        </ToolVideo>
      </a-collapse-panel>
      <a-collapse-panel key="4" header="视频">
        <ToolVideo :toolType="props.toolType" :fileType="'视频'" :listData="listData.video" @getVideoList="getVideoList">
        </ToolVideo>
      </a-collapse-panel>
      <a-collapse-panel key="5" header="爆破图">
        <TechRules :toolType="props.toolType" :fileType="'爆破图'" :listData="listData.blastDiag" @getFileList="getFileList">
        </TechRules>
      </a-collapse-panel>
      <a-collapse-panel key="6" header="工具说明">
        <TechRules :toolType="props.toolType" :fileType="'工具说明'" :listData="listData.illustrate"
          @getFileList="getFileList"></TechRules>
      </a-collapse-panel>
      <a-collapse-panel key="7" header="装配图">
        <TechRules :toolType="props.toolType" :fileType="'装配图'" :listData="listData.AssembDraw"
          @getFileList="getFileList"></TechRules>
      </a-collapse-panel>
    </a-collapse>

    <!-- 新增弹窗 -->
    <AntdConfirmModal :title="`新增${title}信息`" ref="modalRef" width="700px" :keepSlot="false" @confirm="submitForm">
      <a-form :model="form" name="basic" :label-col="{ span: 10 }">
        <a-row>
          <a-col :span="14">
            <a-form-item label="工具名" name="fileToolName">
              <a-input v-model:value="props.toolType" style="width: 380px;" :disabled="true" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-if="title === '视频' || title === '动画'">
          <a-col :span="14">
            <a-form-item label="视频类别" name="videoType" :rules="[{ required: true, message: '请选择视频类型' }]">
              <a-select v-model:value="form.videoType" style="width: 380px;" allowClear>
                <a-select-option v-for="item of videoType" :value="item" :key="item">
                  {{ item }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="14">
            <a-form-item label="文件类别" name="fileToolType">
              <a-input v-model:value="title" style="width: 380px;" :disabled="true" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="20">
            <div>
              <a-form-item label="上传案例文件" style="margin-left: -120px;">
                <a-upload-dragger v-model:fileList="fileList" withCredentials name="file" :before-upload="beforeUpload"
                  :maxCount="1" @remove="handleRemove">
                  <p class="ant-upload-drag-icon">
                    <inbox-outlined></inbox-outlined>
                  </p>
                  <p class="ant-upload-text">点击或者拖拽文件到此处上传</p>
                </a-upload-dragger>
              </a-form-item>
            </div>
          </a-col>
        </a-row>
      </a-form>
    </AntdConfirmModal>
  </div>
</template>
<script setup>
import GroundTool from './type/GroundTool.vue';
import SalvageTube from "./type/SalvageTube.vue";
import TechRules from './type/TechRules.vue';
import ToolVideo from './type/video.vue';
import { groundColumns, salvageColumns } from "../../../constant/columns.js";
import VideoApi from '@/api/salvage/video.js'
import TranFileApi from '@/api/salvage/tranFile.js'
import request from '@/utils/request'
import useApp from "@/hooks";
const { $ } = useApp();
const activeKey = ref(["1"]);
const props = defineProps({
  toolType: {
    type: String,
    default: "初始",
  },
});
const ToolSwitch = ref(null);
const title = ref()
const modalRef = ref(null)
const form = ref({})
const listData = ref({
  techRule: undefined,
  cartoon: undefined,
  video: undefined,
  blastDiag: undefined,
  illustrate: undefined,
  AssembDraw: undefined,
})
const videoType = ref(['工具组装', '模拟打捞', '工具介绍']);
const fileList = ref([]);
const fileForm = ref({
  file: null,
});
watch(() => props.toolType, () => {
  getToolType();
});
// 上传文件
const beforeUpload = (file) => {
  if (title.value === '视频' || title.value === '动画') {
    if (file.type !== "video/mp4") {
      $.showToast({
        title: "只支持上传mp4视频",
        icon: "error",
      });
      return false;
    }
  }
  // 记录文件
  fileForm.value.file = file;
};
// 移除文件
const handleRemove = (file) => {
  fileForm.value.file = null;
};
// 总表转换
getToolType();
function getToolType() {
  if (['循环垫', 'C型垫盘', '加重杆', '快速接头', '电缆T型卡', '链条', '导向帽', '三件套', '分线盘', '冲子',
    '加长筒', '打捞主体', '上接头', '平口引鞋', '控制环', '篮式卡瓦',].includes(props.toolType)) {
    ToolSwitch.value = true;
  } else if (["篮瓦打捞筒", "三球打捞筒", "剪切环瓦打捞筒", "套铣筒"].includes(props.toolType)) {
    ToolSwitch.value = false;
  }
}
// 新建
function addFile(e) {
  form.value = {}
  title.value = e
  modalRef.value.openModal();
}
// 提交
function submitForm() {
  if (title.value === '工具技术规范' || title.value === '爆破图' || title.value === '工具说明' || title.value === '装配图') {
    form.value.fileToolName = props.toolType
    form.value.fileToolType = title.value
    form.value.file = fileForm.value.file
    if (form.value.file == null) {
      $.showToast({ title: "请上传文件！", icon: "warn", });
    } else {
      request.post("/salvage/file", form.value, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }).then((res) => {
        $.showToast({ title: " 上传成功", icon: "success", });
        modalRef.value.closeModal();
        getFileList(title.value)
      });
    }
  } else if (title.value === '动画' || title.value === '视频') {
    form.value.videoToolName = props.toolType
    form.value.video_is_vora = title.value
    form.value.videoFile = fileForm.value.file
    if (form.value.videoFile == null) {
      $.showToast({ title: "请上传视频！", icon: "warn", });
    } else {
      request.post("/salvage/video", form.value, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }).then((res) => {
        $.showToast({ title: " 上传成功", icon: "success", });
        modalRef.value.closeModal();
        getList()
      });
    }
  }
}
// 获取文件列表
function getFileList(type) {
  let query = { order: "DESC", pageNum: 1, pageSize: 6, sortBy: "id", fileToolType: type, fileToolName: props.toolType }
  TranFileApi.queryList(query).then((res) => {
    // 提取queryList文件的扩展名
    res.content.forEach((item) => {
      if (item.fileName !== null) {
        let index = item.fileName.lastIndexOf("."); //获取索引位置
        item.fileType = item.fileName.substr(index + 1); //截取从最后一个点号的下一个字符开始到字符串末尾的子字符串
      }
    });
    switch (type) {
      case '工具技术规范':
        listData.value.techRule = res.content;
        break;
      case '爆破图':
        listData.value.blastDiag = res.content;
        break;
      case '工具说明':
        listData.value.illustrate = res.content;
        break;
      case '装配图':
        listData.value.AssembDraw = res.content;
        break;
      default:
        break;
    }
  });
}
// 获取视频列表
function getVideoList(type) {
  let query = { order: "DESC", pageNum: 1, pageSize: 4, sortBy: "id", video_is_vora: type, videoToolName: props.toolType }
  VideoApi.queryList(query).then((res) => {
    console.log(res);
    if (type === '动画') {
      listData.value.cartoon = res.content;
    } else if (type === '视频') {
      listData.value.video = res.content;
    }
  });
}
</script>
